/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-09 16:34:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-12-12 23:11:19
 * @FilePath: /three-react/src/pages/CurveGeometry/Line1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';



import { pass } from 'three/tsl';
import { bloom } from 'three/addons/tsl/display/BloomNode.js';


const state = {}



function createText() {

  const canvas = document.createElement('canvas');

  const ctx = canvas.getContext("2d");

  canvas.width = 50;  // 设置宽度为 800 像素
  canvas.height = 180; // 设置高度为 600 像素


  // 文字内容
  const text = "万石山隧道";
  const fontSize = 20;
  ctx.font = `${fontSize}px Arial`;
  // 获取文字宽度和高度
  const textHeight = ctx.measureText(text).width;
  const textWidth = fontSize;




  // 创建渐变背景
  const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
  gradient.addColorStop(0, "rgba(20, 137, 128, 0)"); // 左侧透明
  gradient.addColorStop(0.5, "rgba(20, 137, 128, 0.5)"); // 中间不透明
  gradient.addColorStop(1, "rgba(20, 137, 128, 0)"); // 右侧透明
  ctx.fillStyle = "rgba(255,255,255,0)";
  // 绘制渐变背景（覆盖整个 canvas）
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 设置文字填充颜色
  ctx.fillStyle = "#ffffff";


  const centerX = (canvas.width - textWidth) / 2
  const centerY = (canvas.height - textHeight) / 2


  // 竖排绘制文字
  for (let i = 0; i < text.length; i++) {
    const char = text[i];
    ctx.save();
    ctx.translate(centerX, centerY + i * (fontSize + 10)); // 控制文字位置
    // ctx.rotate(-Math.PI / 2); // 旋转90度以实现竖排
    ctx.fillText(char, 0, 0); // 绘制单个字符
    ctx.restore();
  }
  return {
    canvas,
    ctx,
  }
}
export default function Page() {

  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])

  function render(scene) {


    const { canvas } = createText();

    // 创建一个纹理
    const texture = new THREE.CanvasTexture(canvas);

    // 创建一个平面几何体并将纹理应用到上面
    const geometry = new THREE.PlaneGeometry(50, 180);
    const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide });
    const plane = new THREE.Mesh(geometry, material);
    // scene.add(plane);



    const geometry1 = new THREE.ConeGeometry(6, 14, 4);
    const material1 = new THREE.MeshBasicMaterial({ color: 0xffff00 });
    const cone = new THREE.Mesh(geometry1, material1);
    scene.add(cone);



  postProcessing = new THREE.PostProcessing( renderer );

  const scenePass = pass( scene, camera );
  const scenePassColor = scenePass.getTextureNode( 'output' );

  const bloomPass = bloom( scenePassColor );

  postProcessing.outputNode = scenePassColor.add( bloomPass );

  

  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}